<template>
    <div>
        <div class="ball" @click="incrment">{{count}}</div>
    </div>
  </template>
  
  <script lang='ts'>
  import { ref,onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
  export default {
    setup() {
      let count=ref(0)
      const incrment=()=>{
        count.value++
      }
      let timers=0
      //在模板渲染之前调用
      onBeforeMount(() => {
        console.log('-----onBeforeMount---------------');
        console.log( document.querySelector('.ball')?.innerHTML);
        //定义定时器
        timers=setInterval(()=>{
            console.log("############################");
            count.value++
        },1000)

      })
      onMounted(() => {
        //console.log('------onMounted--------------');
        console.log( document.querySelector('.ball')?.innerHTML);
      })
      onBeforeUpdate(() => {
        //console.log('-------onBeforeUpdate-------------');
        //console.log(count.value,document.querySelector('.ball')?.innerHTML);
        
      })
      onUpdated(() => {
        //console.log('------onUpdated--------------');
        //console.log(count.value,document.querySelector('.ball')?.innerHTML);
      })
      onBeforeUnmount(() => {
        console.log('--------onBeforeUnmount------------');
        clearInterval(timers)
      })
      onUnmounted(() => {
        console.log('------onUnmounted--------------');
      })
      return {
        count,
        incrment
      }
    }
  }
  </script>
  
  <style lang='scss' scoped>
    .ball{
      width: 100px;
      height: 100px;
      background-image:radial-gradient(red,orange,yellow);
      text-align: center;
      line-height: 100px;
      font-weight:bolder;
      font-size: 28px;
      color: white;
      border-radius: 50%;
    }
  </style>